﻿/****/
$(document).ready(function () {
    var whei = $(window).width()
    $("html").css({fontSize: whei / 20})
    $(window).resize(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
    });
});


$(window).load(function () {
    $(".loading").fadeOut()
})
$(function () {
    echarts_0()
    echarts_1()
    $.ajax({
        type: "get",
        url: "http://localhost:8080/flow/past7days",
        success: function(msg){
            // 指定图表的配置项和数据
            echarts_2(msg);
        }
    });
    //echarts_2()
    echarts_4()
    echarts_5()

    function echarts_0() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart0'));
        option = {
            legend: {
                //orient: 'vertical',
                top:'20',
                left:'center',
                itemWidth: 10,
                itemHeight: 10,
                data:['1号线','18号线','7号线'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 500,
                max: 600,
                inRange: {
                    //colorLightness: [0, 1]
                }
            },
            series: [{
                name: '分布',
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['50%', '60%'],
                color: ['#0086e5', '#30c5ed', '#9fe7b8', '#fedb5b', '#ff9f7d', '#fb7293', '#e7bcf2'], //'#FBFE27','rgb(11,228,96)','#FE5050'
                data: [
                    {
                        value: 40,
                        name: '1号线'
                    },
                    {
                        value: 20,
                        name: '18号线'
                    },
                    {
                        value: 30,
                        name: '7号线'
                    }
                ].sort(function(a, b) {
                    return a.value - b.value
                }),
                roseType: 'radius',

                label: {
                    normal: {
                        formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'),
                        rich: {
                            d: {
                                color: 'rgb(241,246,104)',
                                fontSize: 14,
                                fontWeight:'bold',

                            },
                            b: {
                                color: 'rgb(98,137,169)',
                                fontSize: 12,

                            },
                        },
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgb(98,137,169)',
                        },
                        smooth: 0.2,
                        length: 5,
                        length2: 9,

                    }
                },
                itemStyle: {
                    normal: {
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 50,
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }

    function echarts_1() {
        myChart = echarts.init(document.getElementById('echarts1'));

        // 请求 cost 数据
        $.ajax({
            type: "get",
            url: "http://localhost:8080/cost/past7days",
            success: function (costData) {
                // 请求 fare 数据
                $.ajax({
                    type: "get",
                    url: "http://localhost:8080/fare/past7days",
                    success: function (fareData) {
                        // 合并数据并设置图表选项
                        setBarData(costData, fareData);
                    },
                    error: function (xhr, status, error) {
                        console.error("AJAX Error: " + status + error);
                    }
                });
            },
            error: function (xhr, status, error) {
                console.error("AJAX Error: " + status + error);
            }
        });

        function setBarData(costData, fareData) {
            let elcost = costData.elcost;
            let fare = fareData.fare;
            let date = fareData.date; // 假设日期在 cost 数据中
            for(var i=0;i<date.length;i++){
                date[i] = date[i].substr(5,10);
            }

            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' },
                },
                legend: {
                    x: 'center',
                    y: '0',
                    icon: 'circle',
                    itemGap: 8,
                    textStyle: { color: 'rgba(255,255,255,.5)' },
                    itemWidth: 10,
                    itemHeight: 10,
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '2%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: date,
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: 14
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    splitNumber: 4,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.05)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: 14
                        },
                    },
                },
                series: [{
                    name: '票价收入',
                    type: 'bar',
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#03b48e'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: fare
                },
                    {
                        name: '电费支出',
                        type: 'bar',
                        barWidth: '10%',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#3893e5'
                                }, {
                                    offset: 1,
                                    color: '#248ff7'
                                }]),
                                barBorderRadius: 11,
                            }
                        },
                        data: elcost
                    }]
            };

            myChart.setOption(option);
        }

        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_2(msg) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts2'));
        var flowList = [];
        var dateList = [];
        //alert(msg);
        if(msg != null && msg.length >0){

            for(var j = 0; j<msg.length ;j++){
                //alert(msg[j].flow);
                flowList.push(msg[j].flow);
                let dateParts = msg[j].date.split("-");
                dateList.push(`${dateParts[1]}-${dateParts[2]}`);
            }
        }
        //alert(dateList)
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#dddc6b'
                    }
                }
            },
            grid: {
                left: '0',
                top: '30',
                right: '5%',
                bottom: '-10',
                containLabel: true
            }, legend: {
                data: ['字段1'],
                right: 'center',
                top: 0,
                textStyle: {
                    color: "#fff"
                },
                itemWidth: 12,
                itemHeight: 10,
                // itemGap: 35
            },

            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                data: dateList //['6月18日', '6月19日', '6月20日', '6月21日', '6月22日', '6月23日', '6月24日', '6月25日', '6月26日', '6月27日', '6月28日', '6月29日', '6月30日', '7月1日', '7月2日']

            }, {
                axisPointer: {show: false},
                axisLine: {show: false},
                position: 'bottom',
                offset: 20,
            }],

            yAxis: [{
                type: 'value',
                axisTick: {show: false},
                // splitNumber: 6,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14,
                    },
                },

                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            }],
            series: [
                {
                    name: '',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: 'rgba(228, 228, 126, 1)',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(228, 228, 126, .8)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(228, 228, 126, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#dddc6b',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: flowList //[600, 200, 600, 200, 400, 200, 400, 300, 400, 300, 400, 300, 200, 400, 200]
                }

            ]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts4'));
        let option = {
            grid: {
                left: '10%',
                top: '1%',
                right: '7%',
                bottom: '-9%',
                containLabel: true
            },
            xAxis: [{
                show: false,
            }],
            yAxis: [{
                axisTick: 'none',
                axisLine: 'none',
                offset: '90',
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: '12',
                        align: 'left'
                    }
                },
                data: ['中医大省医院', '省体育馆', '东郊记忆', '火车南站', '成都西站', '成都东客站', '宽窄巷子', '春熙路']
            }],
            series: [{
                name: '条',
                type: 'bar',
                yAxisIndex: 0,
                data: [3.2, 1.9, 4.5, 4.3, 4.4, 5.9, 5.1, 5.1],
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            color: 'rgba(255,255,255,.8)',
                            fontSize: '12',
                        }
                    }
                },
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#03c893'
                        },
                            {
                                offset: 1,
                                color: '#0091ff'
                            }
                        ]),
                        barBorderRadius: 15,
                    }
                },
                z: 2
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        var data = [283, 234, 234, 312, 345, 320, 280, 271, 254, 229, 210, 190, 182]
        var order = ['line1','line2','line3','line4','line5','line6','line7','line8','line9','line10','line17','line18','line19']
        // var titlename = ['1号线', '2号线', '3号线', '4号线', '5号线', '6号线', '7号线', '8号线', '9号线', '10号线', '17号线', '18号线', '19号线'];
        var titlename = ['1号线 科学城-五根送', '2号线 龙泉驿-犀浦', '3号线 成都医学院-双流西站', '4号线 西河-万盛', '5号线 华桂路-回龙', '6号线 望丛祠-兰家沟', '7号线 内环/外环', '8号线 十里店-莲花', '9号线 金融城东-黄田坝', '10号线 太平园-新平', '17号线 机投桥-九江北', '18号线 火车南站-天府机场北', '19号线 金星-天府机场北'];
        option = {
            grid: {
                left: '-59%',
                top:'0',
                right: '-15%',
                bottom: '-6%',
                containLabel: true
            },
            xAxis: {
                show: false
            },
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    data: titlename,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            padding:[0, 0, 30, 0],
                            align:'left'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    offset:-10,
                },
                {
                show: false,
                inverse: true,
                data: data,
                axisLabel: {textStyle: {color: '#fff'}},
                axisLine: { show: false},
                splitLine:{ show: false},
                axisTick: { show: false},
                },
                {
                    show:false,
                    type: 'category',
                    data:order,
                    axisLine: { show: false},
                    splitLine:{ show: false},
                    axisTick: { show: false},
                },],
            series: [{
                name: '条',
                type: 'bar',
                yAxisIndex: 0,
                data: data,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 50,
                        color:'#1089E7',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{c}',
                        textStyle: {color: 'rgba(255,255,255,.5)'}
                    }
                },
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
})



		
		
		


		



















